import React from 'react';
import './App.less';
import { Select } from 'antd';

export const Header:React.FC =() => {
  const { Option } = Select;
  const handleChange = (value: any) => {
    console.log(`value 变化了,selected ${value}`);
  }
  const onBlur = () => {
    console.log('失去焦点时回调');
    
  }
  const onSearch = () => {
    console.log('文本框值变化时回调');
    
  }
  const onSelect = () => {
    console.log('被选中时调用，参数为选中项的 value (或 key) 值');
    
  }
  return (
    <>
   <div>
    <Select 
      defaultValue="lucy" 
      style={{ width: 120 }} 
      onChange={handleChange}
      allowClear = {true}  //选择的框的值是否可以删除
      // autoFocus={true} // //默认获取焦点
      // disabled = {true} //是否禁用
      showSearch = {true} //搜索
      onBlur = {onBlur} //失去焦点时回调
      onSearch = {onSearch} //输入的文本框值变化回掉，感觉跟搜索框一样，如何涉及到到优化，是否可以防抖节流？
      onSelect = {onSelect}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="disabled" disabled>
          Disabled
        </Option>
        <Option value="Yiminghe">yiminghe</Option>
    </Select>

    <Select defaultValue="lucy" style={{ width: 120 }} disabled>
      <Option value="lucy">Lucy</Option>
    </Select>

    <Select defaultValue="lucy" style={{ width: 120 }} loading>
      <Option value="lucy">Lucy</Option>
    </Select>
  </div>
    </>
  )
  }

